<template>
  <div>
    <el-dialog
      :title="'加播历史'+title+' 或 上传'+title+'至播放列表'"
      fullscreen
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="visible">
      <el-row :gutter="10">
        <el-col :span="16">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>历史{{title}}</span>
              <el-input class="search"
                  placeholder="通过文件名查找"
                  suffix-icon="el-icon-search"
                  v-model="searchForm.name"
                  @change="refreshList()">
              </el-input>
            </div>
            <el-table
              :data="dataList"
              border
              size="medium"
              @sort-change="sortChangeHandle"
              v-loading="loading"
              class="table">
            <el-table-column
                prop="thumb"
                width="72"
                :label="title">
                <template slot-scope="scope">
                  <el-image  @click="view(scope.row)"
                    style="width:50px; height: 50px; "
                    :src="scope.row.thumb">
                  </el-image>
                </template>
              </el-table-column>
            <el-table-column
                prop="name"
                show-overflow-tooltip
                sortable="custom"
                min-width="100"
                label="文件名">
            </el-table-column>
            <el-table-column
                prop="resolution"
                show-overflow-tooltip
                sortable="custom"
                min-width="80"
                label="尺寸" v-if="searchForm.type == '2'">
              </el-table-column>
            <el-table-column
                prop="size"
                show-overflow-tooltip
                sortable="custom"
                min-width="80"
                label="大小">
                <template slot-scope="scope">
                  {{scope.row.size | sizeUint}}
                </template>
            </el-table-column>
            <el-table-column
                prop="createDate"
                show-overflow-tooltip
                sortable="custom"
                min-width="120"
                label="上传时间">
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                fixed="right"
                width="150"
                label="操作">
                <template  slot-scope="scope">
                  <!-- <el-button v-if="hasPermission('info:file:jfInfoFile:view')" type="text" icon="el-icon-view" size="small" @click="view(scope.row)">预览</el-button> -->
                  <el-button type="text"  icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
                  <el-button type="text" size="small" @click="add(scope.row)">加播<i class="el-icon-right el-icon--right"></i></el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageNo"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="total"
              background
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>播放列表</span>
              <el-upload style="float: right;"
                ref='upload'
                :action="`${this.$http.BASE_URL}/sys/file/infoupload/upload`"
                :headers="{token: $cookie.get('token')}"
                :multiple=false
                :limit=1
                :on-success="handleFileSuccess"
                :before-upload="beforeFileUpload"
                :on-error="beforeFileError">
                <el-button style="padding: 0" type="text">上传{{title}}</el-button>
              </el-upload>
            </div>
           <el-table
             :data="selectList"
             border
             size="medium"
             class="table">
             <el-table-column label="播放顺序" type="index" width="80">
               <template slot-scope="scope">
                 <el-row>
                   <el-col :span="15" align="center">{{ scope.$index + 1 }}</el-col>
                   <el-col :span="4">
                     <el-link v-show="scope.$index + 1 < selectList.length" :underline="false" @click="moveDown(scope.row.id, scope.$index)">
                       <i class="el-icon-sort-down"></i>
                     </el-link>
                   </el-col>
                   <el-col :span="4">
                     <el-link :underline="false" v-show="scope.$index != 0" @click="moveUp(scope.row.id, scope.$index)"><i class="el-icon-sort-up"></i></el-link>
                   </el-col>
                 </el-row>
               </template>
             </el-table-column>
             <el-table-column
                prop="thumb"
                width="72"
                :label="title">
                <template slot-scope="scope">
                  <el-image  @click="view(scope.row)"
                    style="width:50px; height: 50px;"
                    :src="scope.row.thumb">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column
                 prop="name"
                 show-overflow-tooltip
                 min-width="100"
                 label="文件名">
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                fixed="right"
                label="操作">
                <template  slot-scope="scope">
                  <el-button type="text"  icon="el-icon-delete" size="small" @click="delSelect(scope.row.$index)">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <el-dialog title="预览" width="70%"  append-to-body :visible.sync="videoVisible" @close="closeVideo">
        <video  scrolling="no" autoplay  style="scrolling:no;background-color: black;"
         width="100%" :src="url"  controls="controls">Your browser does not support the video tag.
        </video>
      </el-dialog>
      <el-dialog title="预览" width="70%"  append-to-body :visible.sync="imageVisible">
        <img width="100%"  :src="url" />
      </el-dialog>
    <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary" @click="doSubmit()" v-noMoreClick>确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        videoVisible: false,
        imageVisible: false,
        url: '',
        title: '视频',
        searchForm: {
          name: '',
          resolution: '',
          type: '1' // 1视频 2图片
        },
        dataList: [],
        selectList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: '',
        loading: false
      }
    },
    methods: {
      init (type, num, list) {
        this.visible = true
        this.searchForm.type = type
        this.selectList = list || []
        if (this.searchForm.type === '1') {
          this.title = '视频'
        } else if (this.searchForm.type === '2') {
          this.title = '图片'
        }
        this.searchForm.name = ''
        this.refreshList()
      },
      // 文件上传前检测
      beforeFileUpload (file) {
        if (this.searchForm.type === '1') {
          // 视频资源
          const isVideo = (file.type === 'video/mp4')
          const isLt4G = file.size / 1024 / 1024 / 1024 < 4
          if (!isVideo) {
            this.$message.error('请上传 MP4 格式视频!')
          }
          if (!isLt4G) {
            this.$message.error('上传视频大小不能超过 4G!')
          }
          return isVideo && isLt4G
        } else if (this.searchForm.type === '2') {
          // 图片资源
          const isIMG = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg')
          const isLt2M = file.size / 1024 / 1024 < 2
          if (!isIMG) {
            this.$message.error('上传图片只能是 jpg/jpeg/png 格式!')
          }
          if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 2MB!')
          }
          return isIMG && isLt2M
        } else {
          this.$message.error('暂不支持')
        }
        return false
      },
      // 文件上传成功
      handleFileSuccess (res, file) {
        this.$refs.upload.clearFiles()
        var item = {
          name: res.name,
          value: res.url,
          url: res.url,
          size: file.size
        }
        if (this.searchForm.type === '1') {
          // 视频资源
          item.thumb = '../../../../static/img/video.png'
          this.selectList.unshift(item)
          var param = {
            id: '',
            thumb: item.thumb,
            name: item.name,
            resolution: '无',
            size: file.size,
            type: 1,
            url: item.value
          }
          this.save(param)
        } else if (this.searchForm.type === '2') {
          item.thumb = res.thumb
          this.selectList.unshift(item)
          var self = this
          var img = new Image()
          img.onload = function () {
            var param = {
              id: '',
              thumb: res.thumb,
              name: res.name,
              resolution: img.width + 'x' + img.height,
              size: file.size,
              type: 2,
              url: res.url
            }
            self.save(param)
          }
          img.src = res.url
        }
      },
      save (item) {
        this.loading = true
        this.$http({
          url: `/info/file/jfInfoFile/save`,
          method: 'post',
          data: item
        }).then(({data}) => {
          if (data && data.success) {
            this.refreshList()
          }
          this.loading = false
        })
      },
      beforeFileError (res, file) {
        this.$message.error('文件上传失败!')
      },
      // 获取数据列表
      refreshList () {
        this.loading = true
        this.$http({
          url: '/info/file/jfInfoFile/list',
          method: 'get',
          params: {
            'pageNo': this.pageNo,
            'pageSize': this.pageSize,
            'orderBy': this.orderBy,
            ...this.searchForm
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.dataList = data.page.list
            this.total = data.page.count
            this.loading = false
          }
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageNo = 1
        this.refreshList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageNo = val
        this.refreshList()
      },
      // 排序
      sortChangeHandle (obj) {
        if (obj.order === 'ascending') {
          this.orderBy = obj.prop + ' asc'
        } else if (obj.order === 'descending') {
          this.orderBy = obj.prop + ' desc'
        } else {
          this.orderBy = ''
        }
        this.refreshList()
      },
      // 添加到播放列表
      add (item) {
        var data = {
          thumb: item.thumb,
          name: item.name,
          value: item.url,
          url: item.url,
          size: item.size
        }
        this.selectList.unshift(data)
      },
      // 查看
      view (item) {
        if (this.searchForm.type === '1') {
          this.videoVisible = true
          this.url = item.url
        } else if (this.searchForm.type === '2') {
          this.imageVisible = true
          this.url = item.url
        }
        // this.$ImagePreview([item], 0)
      },
      // 关闭视频关闭声音
      closeVideo () {
        this.url = ''
      },
      // 删除
      del (id) {
        let ids = id
        this.$confirm(`确定删除所选项吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          this.$http({
            url: '/info/file/jfInfoFile/delete',
            method: 'delete',
            params: {'ids': ids}
          }).then(({data}) => {
            if (data && data.success) {
              this.$message.success(data.msg)
              this.refreshList()
            }
            this.loading = false
          })
        })
      },
      // 下移节目
      moveDown (id, index) {
        var tempOption = this.selectList[index + 1]
        this.$set(this.selectList, index + 1, this.selectList[index])
        this.$set(this.selectList, index, tempOption)
      },
      // 上移节目
      moveUp (id, index) {
        var tempOption = this.selectList[index - 1]
        this.$set(this.selectList, index - 1, this.selectList[index])
        this.$set(this.selectList, index, tempOption)
      },
      // 删除
      delSelect (index) {
        this.selectList.splice(index, 1)
      },
      // 表单提交
      doSubmit () {
        this.visible = false
        this.$emit('filesSelectList', this.selectList)
      }
    }
  }
</script>
<style>
  .search.el-input.el-input--suffix{
    width: 50%;
    float: right;
    margin: -12px 0;
  }
  .search.el-input--suffix .el-input__inner{
    border-radius: 20px;
  }
</style>
